/*
  学习目标：Redux推荐写法
  1. 使用单独函数维护 reducer，一般命名 xxxReducer
  2. 初始值封装成对象，一般命名 initState
  3. switch 替代 if/else

  4. 使用 action creator 创建事件的 action 对象
    
*/
import { legacy_createStore as createStore } from 'redux';

// 2.初始值封装成对象
const initState = { count: 0 };
// 1. 使用单独函数维护 reducer，一般命名 xxxReducer
const countReducer = (state = initState, action) => {
  // 3. switch 替代 if/else
  switch (action.type) {
    case 'add':
      return { ...state, count: state.count + action.payload };
    case 'dec':
      return { ...state, count: state.count - action.payload };
    default:
      return state;
  }
};

// 4. 使用 action creator 创建 事件的 action 对象
const addAction = (payload) => {
  return { type: 'add', payload };
};
const decAction = (payload) => {
  return { type: 'dec', payload };
};

const store = createStore(countReducer);

const unFn = store.subscribe(() => {
  console.log('state状态改变了 -----> ', store.getState().count);
});

// 调用addAction(),并且传入参数payload即可
// ❌❌常见错误，没有调用 addAction
store.dispatch(addAction(1));
store.dispatch(addAction(10));
store.dispatch(decAction(1));
// 停止监听，后面在改变，不会再触发回调
unFn();
store.dispatch(decAction(10));
// store.dispatch({ type: 'dec' });
// console.log('store.getState() -----> ', store.getState().count);

export default function App(params) {
  return <></>;
}
